<template>
  <el-container type="flex" class="login-container">
    <el-main class="main"></el-main>
    <el-aside width="400px" class="aside">
      <el-form autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left"
               label-width="0px" class="login-form" size="default">
        <el-row class="title">
          <span>{{$APP_NAME}}</span>
        </el-row>
        <el-form-item prop="account">
          <el-input class="loginInput" name="account" type="text" v-model="loginForm.account" autoComplete="on" placeholder="账号"/>
        </el-form-item>
        <el-form-item prop="password">
          <el-input class="loginInput" name="password" type="password" @keyup.enter.native="handleLogin" v-model="loginForm.password"
                    autoComplete="on" show-password placeholder="密码"></el-input>
        </el-form-item>
        <el-row type="flex" justify="space-between">
          <el-col>
            <el-form-item prop="captcha">
              <el-input class="loginInput" name="captcha" type="text" @keyup.enter.native="handleLogin" v-model="loginForm.captcha"
                        autoComplete="off" placeholder="验证码"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item class="without-border">
              <img style="width:72px;height:40px;border:1px solid #fff;cursor:pointer" :src="captchaUrl" @click="refreshCaptcha()"
                   @error="onCaptchaError"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item class="without-border">
          <el-button type="primary" style="width:100%;background:linear-gradient(to right, #1ca5fa, #0c6cf2)" :loading="loading" @click.native.prevent="handleLogin">
            登录
          </el-button>
        </el-form-item>
      </el-form>
    </el-aside>
  </el-container>
</template>

<script>
import adminApi from '@/api/admin/adminUser'
import captchaError from '@/assets/img/captchaError.svg'
export default {
  name: 'login',
  props: ['lastPath'],
  data () {
    const validateUsername = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入账号'))
      } else {
        callback()
      }
    }
    const validatePass = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error('密码不能小于6位'))
      } else {
        callback()
      }
    }
    return {
      captchaUrl: `${this.$BASE_API}/captcha?r=${
        this.randomId
      }`,
      loginForm: {
        account: '',
        password: '',
        captcha: '',
        randomId: ''
      },
      loginRules: {
        account: [
          { required: true, trigger: 'blur', validator: validateUsername }
        ],
        password: [{ required: true, trigger: 'blur', validator: validatePass }]
      },
      loading: false
    }
  },
  methods: {
    refreshCaptcha () {
      this.loginForm.randomId = Math.random()
      this.captchaUrl = `${this.$BASE_API}/captcha?r=${this.loginForm.randomId}`
    },
    onCaptchaError () {
      this.captchaUrl = captchaError
    },
    handleLogin () {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          adminApi
            .login(this.loginForm)
            .then(resp => {
              const data = resp.data
              this.$store.dispatch('Login', data).then(() => {
                adminApi
                  .getInfo()
                  .then(resp => {
                    const data = resp.data
                    if (!data.roles || data.roles.length <= 0) {
                      // data.roles = [{ name: '无角色' }]
                      data.roles = 'admin'
                    }
                    this.$store.dispatch('GetInfo', data)
                    var { roles, menus } = data
                    this.loading = false
                    this.$store
                      .dispatch('GenerateRoutes', { roles, menus })
                      .then(() => {
                        this.$router.addRoutes(this.$store.getters.addRouters)
                        // if (this.lastPath) {
                        //   this.$router.push({ path: this.lastPath })
                        //   return
                        // }
                        this.$router.replace({ path: '/' })
                      })
                  })
                  .catch(() => {
                    this.loading = false
                  })
              })
            })
            .catch(() => {
              this.refreshCaptcha()
              this.loginForm.captcha = ''
              this.loading = false
            })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .login-container {
    height: 100vh;
  }
  .main {
    flex: auto;
    background-image: url('~@/assets/map.jpg');
    background-size: cover;
    background-repeat: no-repeat;
  }
  .aside {
    background: rgb(91,91,91);
    flex:none;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
  }
  .login-form {
    width: 250px;
  }
  input:-webkit-autofill {
    box-shadow: 0 0 0px 1000px #e1e2e4 inset !important;
    -webkit-text-fill-color: #000 !important;
    background-color: #000 !important;
  }

  .title {
    font-size: 20px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    margin-bottom: 20px;
    .title_name {
      font-size: 14px;
      margin-left: 20px;
      color: rgba(255,255,255,.45);
    }
  }

</style>

<style rel="stylesheet/scss" lang="scss" >
  .el-input__prefix {
    color: #316bea;
  }
  .loginInput/deep/input {
    background: rgb(117,117,117);
    color: #fff;
  }
  .loginInput/deep/.el-input__inner {
    border: none;
  }
</style>

<style scoped>
  input::-webkit-input-placeholder { /* WebKit browsers 适配谷歌 */
    color: rgba(255,255,255,.45);
  }
  input:-moz-placeholder { /* Mozilla Firefox 4 to 18 适配火狐 */
    color: rgba(255,255,255,.45);
  }
  input::-moz-placeholder { /* Mozilla Firefox 19+ 适配火狐 */
    color: rgba(255,255,255,.45);
  }
  input:-ms-input-placeholder { /* Internet Explorer 10+  适配ie*/
    color: rgba(255,255,255,.45);
  }
</style>
